<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<title>validateMyForm Demo | sales++ jQuery Plugins</title> 
<link href="css/plugin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/system/js/jquery-1.4.2.js"></script> 
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.validateMyForm.1.5.min.js"></script>
<!-- syntax highlighter for this demo page -->
<script type="text/javascript" src="http://www.salesplusplus.com/js/chili/jquery.chili-2.2.js"></script>
<script type="text/javascript" src="http://www.salesplusplus.com/js/chili/recipes.js"></script>
<script type="text/javascript"> 
	$(document).ready(function(){
			$("#form1").validateMyForm({ textareaLimit:25 });
	});
</script> 
<style type="text/css">
body {
	width: 100%;
	font-family:  Arial;
	font-size: 11px;
	color: #000;
}
form {
	margin: 0;
}
select {
	margin: 2px 0;
}
a, a:visited{
	color: #24AD41;
	text-decoration: none;
}
h1 {
	color: #000;
	font: normal normal normal 1.9em/normal Arial;
}
h2 {
	color: #000;
	font: normal normal normal 1.6em/normal Arial;
}
h1 img {
	position: relative;
	margin: 0 5px -15px 0;
	border: none;
}
#body-wrap {
	width: 700px;
	margin: 20px auto;
}
.padding10 {
	padding: 10px;
	margin: 10px 0;
}
label {
	width: 100px;
	text-align: right;
	display:inline-block;
	padding: 0 3px 0 0;
}
.roundCorners {
    border: 1px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
table td {
	vertical-align:top;
	text-align:left;
}
#remaining {
	margin-left: 120px;
	color: #24AD41;
}
.notice i {
	font-size:10px;
	color:#666;
	padding:10px 0;
	display:block;
}
.notice {
	margin-left:110px;
}
</style>
</head> 
<body> 
		<div id="body-wrap">
			<h1><a href="http://www.salesplusplus.com" title="sales++"><img border="0" src="http://www.salesplusplus.com/images/ref/logo_small.png" alt="" /></a> <a href="http://www.salesplusplus.com" title="sales++ jQuery Plugins">sales++ jQuery Plugins</a> - validateMyForm Demo</h1>
			
			<form id="form1" class="roundCorners padding10" action="demo.html" method="post">
				<h2>Working Example</h2>
				<p>Example form with required * fields</p>
				<div><label class="required">Name</label><input type="text" class="required" /></div>
				<div><label class="required">邮箱</label><input type="text" class="email" /></div>
				<div><label>Date of Birth</label><input type="text" class="date" /></div>
				<div><label class="required">House Number</label><input type="text" class="required numeric" /></div>
				<div><label>Comments</label><textarea name="comments" class="required"></textarea>
						<div id="remaining"><p><strong>25</strong> characters remaining</p></div></div>
				<div><label class="required">Accept T&amp;Cs</label><input type="checkbox" value="yes" class="required" /></div>
				<div><label for="age" class="required">Age</label></div>
				<div><label>Under 25</label><input type="radio" name="age" id="age" value="under 25" class="required" /></div>
				<div><label>25 +</label><input type="radio" name="age" value="25 +" /></div>
				<label>Gender</label>
					<select class="required">
						<option value="">Please select...</option>
						<option value="Female">Female</option>
						<option value="Male">Male</option>
					</select>
				<div><label>Own a Car?</label>
					<select class="if1">
						<option value="">Please select...</option>
						<option value="Miss">Yes</option>
					</select>
				</div>
				<div><label>What Car?</label><input type="text" class="then1" /></div>
				<div class="notice"><i>The 'What Car?' question uses Conditional Validation. It will only be validated if the question above it has a value selected</i></div>
				<div><label>&nbsp;</label><input type="submit" value="Submit" /> <input type="button" class="clearForm" value="Clear" /></div>
			</form>
			<div class="roundCorners padding10">
				<h2>Description</h2>
				<p>validateMyForm is designed to provide easy-to-implement and attractive client-side validation for web forms.</p>
				<p>v1.0 (the very first version) contained functionality such as required field, email address, numeric and conditional validation.<p>
				<p>v1.1 contained date validation, and allows you to validate input as email, numeric or a date without marking the field as required - input will simply be validated if it is present. You can of course add 'required' and 'email' to an input, to make a required email address field.</p>
				<p>v1.2 contained validation for checkboxes and radio buttons.</p>
				<p>v1.3 contains validation for textareas, and also a character limit feature shown in example below. Please note that the textarea validation does not yet work for conditional validation, e.g. the 'What Car?' question below.</p>
				<p>v1.4 includes the ability to hide textarea counters when the textarea is empty.</p>
				<p><strong>v1.5 (this version) includes the ability to clear the form, as well as adding asterisks on labels (thanks to AJG).</strong></p>
				<p>If you like this plugin, you can find more at <a href="http://www.salesplusplus.com">sales++</a> or the official <a href="http://plugins.jquery.com/">jQuery Plugin directory</a>.</p>
				<p><a href="http://www.salesplusplus.com/downloads/validateMyForm%20jQuery%20Plugin%20-%20version%201.5"><img src="http://www.salesplusplus.com/wp-content/uploads/2010/09/download.png" border="0" alt=""/></a></p>
			</div>
			<div class="roundCorners padding10">
			<h1>Implementation</h1>
			<h2>Step 1. Include the plugin script (and the jQuery core)</h2>
<pre><code class="html">
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.min.js&quot;&gt;&lt;/script&gt; 
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.validateMyForm.1.5.js&quot;&gt;&lt;/script&gt;
</code></pre>
			<h2>Step 2. Give your required inputs a class so they can be found by the plugin</h2>
<pre><code class="html">
&lt;input type=&quot;text&quot; class=&quot;required&quot; /&gt; 
</code></pre>
<p>To validate an email address, give the input the <i>emailValidationClass</i>. My default, this is 'email'.</p>
<p>To validate radio buttons, give <strong>one of the radio inputs</strong> the requiredClass, an id, and set the <strong>for</strong> attribute of the question label to match this id. The notification will display next to the question label. Please see the source of this page on the 'Age' question for an example.</p>
			<h2>Step 3. Apply the plugin to your form</h2>
<pre><code class="html">
&lt;script type=&quot;text/javascript&quot;&gt; 
&lt;!--
$(document).ready(function(){
	$(&quot;#form1&quot;).validateMyForm();
});
--&gt;
&lt;/script&gt; 
</code></pre>
			</div>
			<div class="roundCorners padding10">
				<h2>Plugin Options (all optional)</h2>
				<table cellpadding="2" cellspacing="2" border="0">
					<thead>
						<tr>
							<th>Option</th>
							<th>Default Value</th>
							<th>Description</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>form</td>
							<td><code class="js">'#form1'</code></td>
							<td>The jQuery selector targetting the form(s).</td>
						</tr>
						<tr>
							<td>requiredClass</td>
							<td><code class="js">'required'</code></td>
							<td>The CSS class given to inputs which are required fields.</td>
						</tr>
						<tr>
							<td>showNotifications</td>
							<td><code class="js">true</code></td>
							<td>Whether to show a visual notification next to the invalid field.</td>
						</tr>
						<tr>
							<td>notificationText</td>
							<td><code class="js">'required'</code></td>
							<td>The text to be displayed in the visual notification.</td>
						</tr>
						<tr>
							<td>notificationClass</td>
							<td><code class="js">'required-display'</code></td>
							<td>The CSS class to give to the visual notifications &lt;span&gt;.</td>
						</tr>
						<tr>
							<td>emailValidationClass</td>
							<td><code class="js">'email'</code></td>
							<td>The CSS class given to inputs which need validating for a correct email address.</td>
						</tr>
						<tr>
							<td>emailNotificationText</td>
							<td><code class="js">'invalid email'</code></td>
							<td>The invalid email text to be displayed in the visual notification.</td>
						</tr>
						<tr>
							<td>numericValidationClass</td>
							<td><code class="js">'numeric'</code></td>
							<td>The CSS class given to inputs which need validating for numeric input.</td>
						</tr>
						<tr>
							<td>numericNotificationText</td>
							<td><code class="js">'not numeric'</code></td>
							<td>The invalid numeric text to be displayed in the visual notification.</td>
						</tr>
						<tr>
							<td>dateValidationClass</td>
							<td><code class="js">'date'</code></td>
							<td>The CSS class given to inputs which need validating for a date.</td>
						</tr>
						<tr>
							<td>dateNotificationText</td>
							<td><code class="js">'invalid date'</code></td>
							<td>The invalid date text to be displayed in the visual notification.</td>
						</tr>
						<tr>
							<td>daysFirst</td>
							<td><code class="js">false</code></td>
							<td>Whether the days should come before the months in the date.</td>
						</tr>
						<tr>
							<td>shake</td>
							<td><code class="js">true</code></td>
							<td>Whether to apply a small 'shake' animation to the visual notifications to draw a bit more attention to them.</td>
						</tr>
						<tr>
							<td>scrollUp</td>
							<td><code class="js">true</code></td>
							<td>Whether to smoothly auto-scroll up the browser window to the first-encountered invalid input on failed validation.</td>
						</tr>
						<tr>
							<td>message</td>
							<td><code class="js">"Please complete all required fields"</code></td>
							<td>If enabled (next option) a message to show in a dialog box when validation fails on submission of the form.</td>
						</tr>
						<tr>
							<td>showMessage</td>
							<td><code class="js">false</code></td>
							<td>Whether to alert a message (above) in a dialog box.</td>
						</tr>
						<tr>
							<td>textareaLimit</td>
							<td><code class="js">0</code></td>
							<td>Trim the textarea to a character limit (0 = disabled, default value)</td>
						</tr>
						<tr>
							<td>textareaCounter</td>
							<td><code class="js">'#remaining strong'</code></td>
							<td>The target selector to insert the characters remaining. (see example above)</td>
						</tr>
						<tr>
							<td>textareaCounterWrap</td>
							<td><code class="js">'#remaining'</code></td>
							<td>The selector pointing to the textarea counter and the connected text. This is whatever needs to be hidden when the textarea counter is active and there is no input yet.</td>
						</tr>
						<tr>
							<td>hideTextareaCounter</td>
							<td><code class="js">false</code></td>
							<td>Whether to hide the textarea counter and text when there is no input in the textarea.</td>
						</tr>
						
						<tr>
							<td>showAsterisk</td>
							<td><code class="js">true</code></td>
							<td>Whether to show a * next to the label of a required field.</td>
						</tr>
						<tr>
							<td>asteriskClass</td>
							<td><code class="js">true</code></td>
							<td>The CSS class given to the *.</td>
						</tr>
						<tr>
							<td>clearForm</td>
							<td><code class="js">'.clearForm'</code></td>
							<td>When this selector is clicked the form will reset, clearing all fields and hiding all notifications.</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="roundCorners padding10">
				<h2>Advanced Plugin Options (all optional)</h2>
				<table cellpadding="2" cellspacing="2" border="0">
					<thead>
						<tr>
							<th>Option</th>
							<th>Default Value</th>
							<th>Description</th>
						</tr>
					</thead>
					<tbody>
						
						
						<tr>
							<td>ifClass</td>
							<td><code class="js">'if'</code></td>
							<td><p>The CSS class given to inputs with dependencies (other inputs) which need validating if this input is not null.</p>
							<p>e.g. If the 'Add a comment' input has 'Yes' selected (it has a value), then validate the 'comment' input to check it is filled in.</p>
							<p>In other words, this secondary 'comment' input (with the ifClass + integer) only needs validating if the primary 'Add a Comment' input (with the thenClass + integer) has a value.</p>
							</td>
						</tr>
						<tr>
							<td>thenClass</td>
							<td><code class="js">'then'</code></td>
							<td><p>The CSS class given to the secondary 'thenClass' inputs (described above) which need validating only if the corresponding primary 'ifClass' input has a value.</p>
							<p>'ifClass' and 'thenClass' inputs are linked together in this way by appending an integer (starting at 1) to this class in the HTML.</p>
							<p>e.g. the primary 'Add a Comment' checkbox is given the CSS Class 'if1' and the secondary 'Comment' input is given the class 'then1'. (The next set would use 'if2' and 'then2')</p>
							<p>View the source of this demo page for exact usage.</p>
							</td>
						</tr>

					</tbody>
				</table>
			</div>
		</div>
		<script type="text/javascript">

		  var _gaq = _gaq || [];
		  _gaq.push(['_setAccount', 'UA-17716290-6']);
		  _gaq.push(['_trackPageview']);

		  (function() {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		  })();

		</script>
</body> 
</html>
